{extend name="$admin_layout" /}
{block name="content"}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/statistics/css/base.css">
    <link rel="stylesheet" href="/static/statistics/css/orderDetail.css">
    <!-- element -->
    <link rel="stylesheet" href="/static/plugins/element-ui/element-ui.css">
    <!-- vue -->
    <script src="/static/plugins/vue/vue.min.js"></script>
    <!-- 引入组件库 element -->
    <script src="/static/plugins/element-ui/element-ui.js"></script>
    <style>
        .btn-list{
            margin-bottom: 20px;
        }
        .el-button{
            padding: 5px 10px;
        }
        .box-drawer{
            padding: 25px;
        }
        .box-drawer-btn{
            display: flex;
            justify-content: center;
            height: 80px;
            align-items: center;
        }
        .btn-list a{
            color: #ffffff;
        }
    </style>
</head>

<body>

    <div id="el">
        <div class="fu-order-detail-tips">{:lang('订单详情')} <div  style="float: right; cursor: pointer;" ><button class="btn btn-default btn-flat btn-xs pull-right" type="button" onclick="javascript:history.back(-1);return false;">
            <i class="fa fa-mail-reply"></i> {:lang('返回')} </button> </div></div>
        <!-- 订单基本信息 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{:lang('订单基本信息')}</span>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('订单号')}：</span>
                        <span>{$order_info.order_sn}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('订单类型')}：</span>
                        <span>{$order_info.order_type_name}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('订单状态')}：</span>
                        {if condition="$order_info['order_type'] == 7"}
                            {if condition="$order_info['pay_status'] == 2"}
                             <span class="label label-flat label-success">{:lang('定金已付')}</span>
                             <span class="label label-flat label-success">{:lang('尾款已付')}</span>
                             {elseif condition="$order_info['pay_status'] == 1"/}
                             <span class="label label-flat label-success">{:lang('定金已付')}</span>
                             <span class="label label-flat label-warning">{:lang('尾款未付')}</span>
                             {elseif condition="$order_info['pay_status'] == 0"/}
                             <span class="label label-flat label-warning">{:lang('定金未付')}</span>
                             <span class="label label-flat label-warning">{:lang('尾款未付')}</span>
                             {/if}
                        {else /}
                            <span class="fu-el-col-status">{$order_info.order_status}</span>
                        {/if}

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            {if condition="$order_info['order_type'] == 5"}
                                {if condition='$order_info.group_info.is_full==0'}
                                <span class="label label-flat label-warning">{:lang('未成团')}</span>
                                {else/}
                                <span class="label label-flat label-success">{:lang('已成团')}</span>
                                {/if}
                            {/if}


                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('会员姓名')}：</span>
                        <span>{$order_info.user.user_name}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('会员手机')}：</span>
                        <span>{$order_info.user.mobile}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('会员等级')}：</span>
                        <span>{$order_info.user_level}</span>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('商品金额')}：</span>
                        <span>￥{$order_info.order_goods_money}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('会员折扣')}：</span>
                        <span>- ￥0.00</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('货币')}：</span>
                        <span>CNY</span>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('运费')}：</span>
                        <span>￥{$order_info.express_price}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('优惠券减免')}：</span>
                        <span>- ￥{$order_info.coupon_money}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('货币汇率')}：</span>
                        <span>1</span>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('优惠总金额')}：</span>
                        <span style="display: flex;"><span>￥{$order_info.coupon_money}</span><span class="fu-el-col-tips-js">({:lang('包含优惠券')}，{:lang('满折')}，{:lang('满减等优惠金额')})</span></span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('支付积分')}：</span>
                        {if condition="$order_info['order_type'] == 12"}
                        <span>{$order_info.cost_integral}</span>
                        {else /}
                        <span>{$order_info.integral_reduce}</span>
                        {/if}
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('下单时间')}：</span>
                        <span>{$order_info.create_time}
                        </span>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('应付总金额')}：</span>
                        <span>￥{$order_info.order_money}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('实付总金额')}：</span>
                        {if condition="$order_info['order_type'] == 7"}
                        {if condition="$order_info['pay_status'] == 1"}
                        <span>￥{$order_info.payable_money}</span>
                        {/if}
                        {if condition="$order_info['pay_status'] == 2"}
                        <span>￥{$order_info.order_money}</span>
                        {/if}
                        {else/}
                        <span>￥{$order_info.payable_money}</span>
                        {/if}
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('更新时间')}：</span>
                        <span>{$order_info.update_time}
                        </span>
                    </el-col>
                </el-row>
            </div>
        </el-card>

        {if condition="$order_info['order_type'] == 5 && $order_info['group_list']"}
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{:lang('拼团详情')}</span>
            </div>
            {volist name="$order_info['group_list']" id="tab"}
            {if condition="$tab['order_sn'] !== $order_info.order_sn"}
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('用户名')}：</span>
                        <span>{$tab['user_name']}</span>
                    </el-col>
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('订单号')}</span>
                        <span><a ident="edit" title="{:lang('详情')}" href="{:url('detail',['order_sn'=>$tab['order_sn']])}"  class="mr5">{$tab['order_sn']}</a></span>
                    </el-col>
                </el-row>
            </div>
            {/if}
            {/volist}

        </el-card>
        {/if}

        <!-- 商品清单 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{:lang('商品清单')}</span>
            </div>


            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="date"
                    label="{:lang('商品图片')}"
                    >
                    <template slot-scope="scope">
                        <img :src="scope.row.goods_thumb" alt="" class="fu-table-img">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="goods_name"
                    show-overflow-tooltip
                    label="{:lang('商品名称')}"
                   >
                </el-table-column>
                <el-table-column
                        prop="goods_sn"
                        label="{:lang('货号')}">
                </el-table-column>
                <el-table-column
                    prop="sku_name"
                    label="{:lang('规格')}">
                </el-table-column>
                <el-table-column
                    prop="shop_price"
                    label="{:lang('单价')}">
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="{:lang('数量')}">
                </el-table-column>

                <el-table-column
                        prop="goods_money"
                        label="{:lang('实际支付')}">
                </el-table-column>

            </el-table>
        </el-card>

        {if($order_info.send_type)}
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{:lang('自提点提货信息')}</span>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-col :span="12">
                            <span class="fu-el-col-tips">{:lang('自提点名称')}：</span>
                            <span>{$order_info.pick_info.deliver_name}</span>
                        </el-col>
                        <el-col :span="12">
                            <span class="fu-el-col-tips">{:lang('自提点联系电话')}：</span>
                            <span>{$order_info.pick_info.deliver_mobile}</span>
                        </el-col>
                        <el-col :span="12">
                            <span class="fu-el-col-tips">{:lang('自提点地址')}：</span>
                            <span>{$order_info.pick_info.full_address}</span>
                        </el-col>
                        <el-col :span="12">
                            <span class="fu-el-col-tips">{:lang('预约自取时间')}：</span>
                            <span>{$order_info.pick_info.pickup_date} {$order_info.pick_info.pickup_delivery_time}</span>
                        </el-col>
                        
                        <el-col :span="12">
                            <span class="fu-el-col-tips">{:lang('提货人姓名')}：</span>
                            <span>{$order_info.pick_info.pickup_user_name}</span>
                        </el-col>
                        <el-col :span="12">
                            <span class="fu-el-col-tips">{:lang('提货人手机号')}：</span>
                            <span>{$order_info.pick_info.pickup_user_mobile}</span>
                        </el-col>
                    </el-col>
                </el-row>
            </div>
        </el-card> 
        {else /}
        <!-- 物流信息 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{:lang('物流信息')}</span>
            </div>
            <div style="margin-bottom: 10px;">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <span class="fu-el-col-tips">{:lang('收货人信息')}：</span>
                        <span>{$order_info.receiver_name},
                              {$order_info.receiver_mobile},
                              {$order_info.province},
                              {$order_info.city},
                              {$order_info.district},
                              {$order_info.receiver_address}
                        </span>
                    </el-col>
                </el-row>
            </div>
            {if($order_info.order_express.express_no)}
            <div style="margin-bottom: 10px;">
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('快递公司')}：</span>
                        <span>{$order_info.order_express.express_company}
                        </span>
                    </el-col>
                </el-row>
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('发货单号')}：</span>
                        <span>{$order_info.order_express.express_no}
                        </span>
                    </el-col>
                </el-row>
                <el-row :gutter="12">
                    <el-col :span="8">
                        <span class="fu-el-col-tips">{:lang('备注')}：</span>
                        <span>{$order_info.order_express.memo}
                        </span>
                    </el-col>
                </el-row>
            </div>
            {/if}
        </el-card>
        {/if}

      
        <div class="btn-list">
            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="col-sm-3 col-lg-2 label-title text-right"></div>
                <div class="col-sm-6 col-lg-5">
                    <div class="totalMoney clearfix" style="display: block;"><span style="float:left; line-height: 36px;">用户余额：￥{$order_info.user.user_money}</span></div>
                </div>
            </div>
            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="col-sm-3 col-lg-2 label-title text-right"></div>
                <div class="col-sm-6 col-lg-5">
                    <div class="totalMoney clearfix" style="display: block;"><span style="float:left; line-height: 36px;">订单总计：</span><input style="float:left;width:50%" type="text" id="total_money" value="{$order_info.payable_money}" name="total_money"></div>
                </div>
            </div>

            <el-button type="danger"> <a href="javascript:xxPaySubmit()">{:lang('余额支付')}</a></el-button>
        </div>
<!--
        <div class="fu-order-detail-btn">
            <el-button class="fu-form-item-data-btn" @click="javascript:history.back(-1);return false;">{:lang('返回')}</el-button>
        </div>
-->

        <input type="hidden" id="order_goods" name="order_goods" value="{$order_info.order_goods}">
        <el-drawer
                :visible.sync="drawer"
                :direction="direction"
                :before-close="handleClose">
                <div class="box-drawer">
                    <form action="/admin.php/order/order/verify_status" method="post">
                        <input type="hidden" name="rank" :value="textarea2">
                        <input type="hidden" name="type" :value="type">
                        <input type="hidden" name="order_sn" value="{$order_info.order_sn}">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 8}"
                                placeholder="{:lang('请输入内容')}"
                                v-model="textarea2">
                        </el-input>
                        <div class="box-drawer-btn">
                            <el-button @click="cancel">{:lang('取消')}</el-button>

                            <button type="submit" class="el-button el-button--default el-button--small el-button--primary " onclick="let index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);setTimeout(()=>{parent.window.location.reload()},0);" value="submit">{:lang('确定')}</button>
                            <!--<el-button type="submit" value="Submit">确定</el-button>-->
                        </div>
                    </form>
                </div>
        </el-drawer>

</body>
<script>
function closelayer() {
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    parent.layer.close(index);
}

    let order_action = [];
    let order_action_val = $('#order_action').val();
    // console.log(order_action_val);
    if( order_action_val != undefined ){
        order_action = JSON.parse(order_action_val);
    }

    let order_goods = JSON.parse($('#order_goods').val());
    new Vue({
        el: '#el',
        data() {
            return {
                tableData:order_goods|| [],
                drawer:false,
                direction: 'rtl',
                textarea2:'',
                type:1,
                tableList: order_action || [],
            }
        },
        mounted() {

        },
        methods: {
            handleClose(done) {
                this.$confirm("{:lang('确认关闭')}"+'？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            cancel(){
                this.drawer = false;
            },
            openDrawer(type){
                this.drawer = true;
                this.type = type;
            }
        },
    })


function xxPaySubmit(){
    total_money =   $('#total_money').val();
    if(total_money == ''){
        layer.msg("{:lang('订单金额为空')}");
        return false;
    }
    user_money = "{$order_info.user.user_money}";
    if(100*total_money > 100*user_money){
        //layer.msg("{:lang('用户余额不足，请充值')}");
        //return false;
    }

    $.ajax({
    type:'post',
    dataType:'json',
    url:"{:url('order/order/xx_pay')}",
    data:{
        'aid':"{$order_info.aid}",
        'pay_type':'balance',
        'total_money':total_money,
        'order_sn':"{$order_info.order_sn}",
    },
    success:function(ret){
        if(ret.code == 1){
            layer.alert(ret.msg)
            setTimeout(function() {
                location.href = ret.url
            },
            1000)
        }else{
            layer.alert(ret.msg)
        }
    },
    error:function(ret){
        layer.alert(ret.msg)
    },
    })
}
</script>

</html>
{/block}